<template>
  <div>
    <div class="model-title-css">
      <div class="title">待办标题规则</div>
    </div>
    <div class="background_wrap">
    <div class="operate_wrap flex">
      <div class="flex-center">
        <el-button type="primary" size="small" class="add buildButtonStyle" @click="showDialog('build','审查会会议纪要新增')"
                   v-permission="permission.add" style="margin-bottom: 10px;"><i class="iconfont icon-icon_add"></i>&nbsp新增
        </el-button>
      </div>
      <div class="flex-right">
        <el-input style="margin: 0; margin-right: 15px" class="search-input" v-model="search.entityClass" clearable placeholder="请输入实体类类名" />
        <el-input class="search-input" v-model="search.moduleName" clearable placeholder="请输入模块名称" />
        <el-button class="search" size="small" @click="getList(true)">
          <i class="iconfont icon-sousuo"></i> 搜索
        </el-button>
      </div>
    </div>
    <div class="list_wrap WholeScroll">
      <el-table
              class="changeVisaTable"
              :border="true"
              :row-class-name="tableRowStyleName"
              :cell-class-name="tableCellStyleName"
              :header-cell-class-name="tableHeaderCellStyleName"
              :stripe="true"
              ref="multipleTable"
              :data="list"
              tooltip-effect="dark"
              @cell-click="cellClick"
              style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;"
              @selection-change="handleSelectionChange">
        <el-table-column
                show-overflow-tooltip
                label="序号"
                type="index"
                width="60">
          <template slot-scope="scope">
            <span>{{search.pageNo * search.pageSize +scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                v-for="(item, i) in elTableList"
                :key="i"
                :sortable="item.sort ? item.sort : false"
                :min-width="item.width"
                :prop="item.prop"
                :label="item.name">
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                min-width="120px"
                label="操作"
        >
          <template slot-scope="scope">
            <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="showDialog('check','审查会会议纪要查看',scope.row.id)">&nbsp;查看</el-button>
            <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="showDialog('edit','审查会会议纪要编辑',scope.row.id)">&nbsp;修改</el-button>
            <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="showDialog('delete','审查会会议纪要删除',scope.row.id)">&nbsp;删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              style="float: right; margin-top: 30px;"
              layout="prev, pager, next"
              :page-size="search.pageSize"
              :total="search.pageSum"
              :current-page="search.pageNo + 1"
              :prev-text="tablePaginationPrev"
              :next-text="tablePaginationNext"
              @current-change="paginationChange"
      >
      </el-pagination>
    </div>
      <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
  </div>
  </div>
</template>

<script>
  import {
    tableRowStyleGol,
    tableCellStyleGol,
    tableHeaderCellStyleGol,
  } from '@/utils/publicFun'
  import titleRule from '@/api/wf/titleRule'
  import msgUtil from '@/utils/msgUtil'
  export default {
    components: {
      Detail: require(`./titleRule-detail`).default,
    },
    data() {

      return {
        permission:{
          add: ['100', '1000086:add'],
          show: ['100', '1000086:show'],
          edit: ['100', '1000086:edit'],
          del: ['100', '1000086:del'],
        },
        tableRowStyleName: tableRowStyleGol,
        tableCellStyleName: tableCellStyleGol,
        tableHeaderCellStyleName: tableHeaderCellStyleGol,
        tablePaginationPrev: '上一页',
        tablePaginationNext: '下一页',
        companyTree: [], // 公司下拉
        projectTree: [], // 项目下拉
        sectionTree: [], // 标段下拉
        postDetailData: {
          show: false,
          type: 'build'
        },
        selectedIds: [],
        //  搜索参数
        search: {
          pageNo: 0,
          pageSize: 10,
          pageSum: 0,
          entityClass: '',
          moduleName: '',
        },

        // 列表
        list: [

        ],

        elTableList: [
          {
            name: '实体类类名',
            prop: 'entityClass',
            width: '60',
          },
          {
            name: '模块名称',
            prop: 'moduleName',
            width: '120px',
          },
          {
            name: '前端路由',
            prop: 'path',
            width: '120px',
          }
        ], // el的table列表
      }
    },
    created() {
      this.getList();
    },
    mounted() {

    },
    methods: {

      /**
       *  根据建设单位查询下面的所有项目
       * */
      getProjectByCompanyId() {
        if(this.search.projectId){
          this.search.projectId = ''
        }
        if(this.search.sectionId){
          this.search.sectionId = ''
        }


        this.companyTree.forEach((item) => {
          if (item.id === this.search.companyId) {
            this.projectTree = item.children
          }
        })
      },

      /**
       * 根据项目id获取标段列表
       * getContractByProjectId
       * */
      getSectionByProjectId() {
        if(this.search.sectionId){
          this.search.sectionId = ''
        }

        if (this.search.projectId) {
          this.projectTree.forEach((item) => {
            if (item.id === this.search.projectId) {
              this.sectionTree = item.children
            }
          })
        }
      },
      // 获取列表 api
      getList() {
        this.list =[]
        titleRule.list(this.search).then(res => {
          if (res.code == 200) {
            if(res.data.content.length>0){
              this.list = res.data.content
            }
            this.search.pageSum = res.data.totalElements
          }else {
            msgUtil.error2(res.data.message)
          }
        })
      },
      // 切换列表
      paginationChange(index) {
        this.search.pageNo = index - 1
        this.getList()
      },
      showDialog(type, typeNmae, detailId) {
        switch (type){
          case 'build':
            this.postDetailData = {
              show: true,
              type: type,
              typeNmae: typeNmae,
              detailId: '',
            }
            break
          case 'edit':
          case 'check':
            this.postDetailData = {
              show: true,
              type: type,
              typeNmae: typeNmae,
              detailId: detailId,
            }
            break
          case 'delete':
            if (detailId === '') {
              msgUtil.error2('请先选择要删除的记录！')
              return
            }
            msgUtil.confirm('确认删除该条数据?').then(res => {
              let idlist=[]
              idlist.push(detailId)
              titleRule.del(idlist).then(res=>{
                if (res.code === 200) {
                  msgUtil.success2('删除成功!')
                  this.getList()
                }else {
                  msgUtil.error2(res.msg)
                }
              })
            })
            break
        }
      },
      // 点击单元格 展示详情
      cellClick(row, column, cell, event) {
        // console.log(row, column, cell, event)
        console.log(column)
        if (column.property === 'title') {
          this.postDetailData = {
            show: true,
            type: 'check',
            typeName: '查看',
            detailId: row.id,
          }
        }
      },
      handleSelectionChange(val) {
        this.selectedIds = []
        val.forEach(item => {
          this.selectedIds.push(item.id)
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .operate_wrap {
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    .el-button, .el-select, .el-input {
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      display: inline-block;
    }
    .el-date-editor--daterange {
      width: 300px;
    }
    .add {
      width: 92px;
    }
    .delete {
      width: 88px;
    }
    .search {
      width: 88px;
      float: right;
      color: #fff;
      margin-left: 10px;
    }
    .el-select {
      width: 180px;
      float: right;
      margin-left: 10px;
    }
    .input {
      width: 180px;
      float: right;
      margin-left: 10px;
      color: #3E556E;
    }
  }

  .list_wrap {
    margin-top: 20px;
  }
</style>
